<template>
  <div class="home">
    <div>
      <h2 style="color: green">喜乐多奶茶</h2>
    </div>
    <div class="dv4">
      <van-swipe :autoplay="3000" lazy-render>
        <van-swipe-item>
          <img class="img1" :src="require('/public/images/img01.png')" @click="this.$router.push('/order')"/>
        </van-swipe-item><van-swipe-item>
        <img class="img1" :src="require('/public/images/img02.png')" @click="this.$router.push('/order')"/>
      </van-swipe-item><van-swipe-item>
        <img class="img1" :src="require('/public/images/img03.png')" @click="this.$router.push('/order')"/>
      </van-swipe-item><van-swipe-item>
        <img class="img1" :src="require('/public/images/img04.png')" @click="this.$router.push('/order')"/>
      </van-swipe-item>
      </van-swipe>
    </div>
    <div style="margin-top: 15px">
      <van-notice-bar
          left-icon="volume-o"
          text="激起你心底的思念，回味最初的感觉，新鲜人伴你迈向成功的每一步！"
      />
    </div>

    <div class="dv5">
      <van-grid :border="false" :column-num="2">
        <van-grid-item>
          <div>
            <van-image
                src="https://img0.baidu.com/it/u=549329049,1872281980&fm=253&fmt=auto&app=138&f=JPEG?w=563&h=500"
            />
          </div>
          <div>
            <h2 style="line-height: 30%">门店自取</h2>
            <p style="background-color: #DAAADB;border: #666666 1px solid" @click="fj()">查看附近的门店</p>
          </div>
        </van-grid-item>
        <van-grid-item>
          <div>
            <van-image
                src="https://gimg2.baidu.com/image_search/src=http%3A%2F%2Fhbimg.b0.upaiyun.com%2Fb968324841edf60913ebf4a13ffb69b2c61700685531-6GDT19_fw658&refer=http%3A%2F%2Fhbimg.b0.upaiyun.com&app=2002&size=f9999,10000&q=a80&n=0&g=0n&fmt=auto?sec=1659271640&t=bbeee910c463f25ce7672c4dbc9ae64e"
            />
          </div>
          <div>
            <h2 style="line-height: 30%">外卖</h2>
            <p style="line-height: 30%">无需接触，喜送到家</p>
          </div>
        </van-grid-item>
      </van-grid>
    </div>

    <div style="margin-bottom: 150px">
      <van-row>
        <van-col span="12">
          <div class="dv6">
            <div>
              <van-icon name="point-gift-o" size="50" @click="tea()"/>
            </div>
            <div style="margin-bottom: 10px">
              <h3 style="line-height: 10%">喜茶百货</h3>
              <p style="line-height: 10%">新装气泡水畅饮更尽兴</p>
            </div>
          </div>
        </van-col>
        <van-col span="12">
          <div class="dv6">
            <div>
              <van-icon name="friends-o" size="50" @click="buy()"/>
            </div>
            <div>
              <h3 style="line-height: 10%">阿喜团餐</h3>
              <p style="line-height: 10%">最高享九折火热预定中</p>
            </div>
          </div>
        </van-col>
      </van-row>

    </div>
  </div>
</template>

<script>

export default {
  name: 'HomeView',
  data() {
    return {

    }
  },
  methods: {
    tea(){
      this.$router.push("/grocery");
    },
    buy(){
      this.$router.push("/order");
    },
    fj(){
      this.$router.push("/map");
    }
  }
}
</script>

<style>
.img1{
  margin-top: 10px;
  width: 90%;
  height: 250px;
}
.dv4{
  width: 100%;
  margin-top: 5px;
}
.dv5{
  width: 90%;
  margin: 10px auto 40px;
  box-shadow:5px 5px 10px gray;
}
.dv6{
  background-color: rgba(169, 169, 169, 0.99);
  border-radius: 20px;
  margin: 2px 10px;
  height: 120px;
}

</style>

